<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue';

// 获取从父组件传递的keyword prop
const props = defineProps<{
  keyword: string;
}>();

// 当前激活的 Tab
const active = ref(0);

// 定义三个子内容组件（懒加载）
const FoodContent = defineAsyncComponent(() =>
    import('@/components/search/FoodContent.vue')
);
const ProductContent = defineAsyncComponent(() =>
    import('@/components/search/ProductContent.vue')
);
const DietContent = defineAsyncComponent(() =>
    import('@/components/search/DietContent.vue')
);
</script>

<template>
  <div class="result-page">
    <!-- Tab 切换：食物 / 商品 / 减肥方案 -->
    <van-tabs v-model:active="active" swipeable>
      <van-tab title="🥗 食物">
        <FoodContent v-if="active === 0" :keyword="props.keyword" />
      </van-tab>
      <van-tab title="🛍️ 商品">
        <ProductContent v-if="active === 1" :keyword="props.keyword" />
      </van-tab>

    </van-tabs>
  </div>
</template>

<style scoped>
.result-page {
  padding: 16px;
}
.search-keyword {
  text-align: center;
  margin-bottom: 16px;
}
</style>